<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>移动端布局</title>
</head>
<style>

.body{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	width: 420px;
	height: 800px;
	background-color: lightgrey;
}

.header{
	background-color: cornflowerblue;
	/* width: 100px; */
	height: 68px;
	margin-bottom: auto;
	display: flex;
}
.head-title{
	margin: auto;
}

.footer{
	background-color: lightskyblue;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	/* width: 100px; */
	height: 56px;
	display: flex;
}
.f-item{
	display: flex;
}
.btn{
	margin: auto;
}

</style>
<body>

大容器中分上中下，最下面的，横向分多个等份<br><br>

<div class="body">
	<div class="header">
		<div class="head-title">标题</div>
	</div>
	<div class="main">
		
	</div>
	<div class="footer">
		<div class="f-item">
			<span class="btn">微信</span>
		</div>
		<div class="f-item">
			<span class="btn">通讯录</span>
		</div>
		<div class="f-item">
			<span class="btn">发现</span>
		</div>
		<div class="f-item">
			<span class="btn">我</span>
		</div>
	</div>
</div>

</body>
</html>
